/* flex box */

.cw-flex,
.cw-flex-show,
.cw-flex-column {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
}

.cw-flex-hide {
    display: none;
}


/* flex排列方式 */

.cw-flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.cw-flex-row-reverse {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.cw-flex-column {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.cw-flex-column-reverse {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}


/* flex容器内对齐方式 */

.cw-flex-top {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.cw-flex-middle {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.cw-flex-bottom {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.cw-flex-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.cw-flex-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.cw-flex-right {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.cw-flex-stretch {
    -webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.cw-flex-space-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.cw-flex-baseline {
    -webkit-box-align: baseline;
    -webkit-align-items: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
}

.cw-flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


/* flex栅格化 */

.cw-flex-1,
.cw-flex-fit {
    -webkit-box-flex: 1!important;
    -webkit-flex: 1!important;
    -ms-flex: 1!important;
    flex: 1!important;
}

.cw-flex-2 {
    -webkit-box-flex: 2!important;
    -webkit-flex: 2!important;
    -ms-flex: 2!important;
    flex: 2!important;
}

.cw-flex-3 {
    -webkit-box-flex: 3!important;
    -webkit-flex: 3!important;
    -ms-flex: 3!important;
    flex: 3!important;
}

.cw-flex-4 {
    -webkit-box-flex: 4!important;
    -webkit-flex: 4!important;
    -ms-flex: 4!important;
    flex: 4!important;
}

.cw-flex-5 {
    -webkit-box-flex: 5!important;
    -webkit-flex: 5!important;
    -ms-flex: 5!important;
    flex: 5!important;
}

.cw-flex-6 {
    -webkit-box-flex: 6!important;
    -webkit-flex: 6!important;
    -ms-flex: 6!important;
    flex: 6!important;
}




[cw-role='cell'],
[cw-mode='x-equal'] {
    @extend .cw-flex;
}

[cw-role='cell'] > *{
    -webkit-box-flex:0;
    -webkit-flex:none;
        -ms-flex:none;
            flex:none;
}

[cw-mode='y'],
[cw-mode='y-equal'] {
    @extend .cw-flex-column;
}

[cw-mode='wrap']{
    @extend .cw-flex-wrap;
}

[cw-show='true']{
    @extend .cw-flex-show;
}
[cw-show='false']{
    @extend .cw-flex-hide;
}

[cw-talign='left'] {
    text-align: left;
}

[cw-talign='center'] {
    text-align: center;
}

[cw-talign='left'] {
    text-align: left;
}

[cw-talign='right']{
    text-align: right;
}

[cw-valign='bottom']{
    @extend .cw-flex-bottom;
    @extend .cw-flex-left;
}

[cw-valign='middle'] {
    @extend .cw-flex-middle;
    @extend .cw-flex-left;
}
[cw-valign='top'] {
    @extend .cw-flex-top;
    @extend .cw-flex-left;
}

[cw-valign='baseline']{
    @extend .cw-flex-baseline;
}

[cw-align='center']{
    @extend .cw-flex-center;
    text-align: center;
}

[cw-align='right']{
    @extend .cw-flex-right;
    text-align: right;
}

[cw-align='left']
{
    @extend .cw-flex-left;
    text-align: left;
}


[cw-valign='fit'] {
    @extend .cw-flex-stretch;
}

[cw-layout='fit'] {
    @extend .cw-flex-1;
}

[cw-layout='text'] {
    display: block !important;
    padding: 5px !important;
    line-height: 150%;
}

[cw-layout='text'] p {
    text-indent: 2em;
    margin: 5px 0 5px 5px;
}

[cw-mode='x-equal']>[cw-role='cell'] {
    @extend .cw-flex-1;
}

[cw-mode='y-equal']>[cw-role='cell'] {
    @extend .cw-flex-1;
}

[cw-mode='y'][cw-valign='middle'], 
[cw-mode='y-equal'][cw-valign='middle'] {
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}

[cw-mode='y'][cw-align='center'],
[cw-mode='y-equal'][cw-align='center'] {
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
}

[cw-mode='y'][cw-align='left'], 
[cw-mode='y-equal'][cw-align='left']{
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
        -ms-flex-align: start;
            align-items: flex-start;
}
[cw-mode='y'][cw-align='right'], 
[cw-mode='y-equal'][cw-align='right']{
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
        -ms-flex-align: end;
            align-items: flex-end;
}

[cw-mode='wrap'][cw-layout='fit']{
    -webkit-box-align: start;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
}

[cw-flex='1']{
    @extend .cw-flex-1;
}
[cw-flex='2']{
    @extend .cw-flex-2;
}
[cw-flex='3']{
    @extend .cw-flex-3;
}
[cw-flex='4']{
    @extend .cw-flex-4;
}
[cw-flex='5']{
    @extend .cw-flex-5;
}
[cw-flex='6']{
    @extend .cw-flex-6;
}


